<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新手指引</title>
    <link rel="stylesheet" href="../../public/css/CSS/reset.min.css">
    <link rel="stylesheet" href="../../public/css/other/noviceGuidance.css">
    <link rel="stylesheet" href="../../public/css/other/clearOutline.css">
</head>

<body>
<div class="pc">
    <!--外部容器-->
    <div class="top-bar-wrapper">
        <!-- 中间主体部分容器 -->
        <div class="top-bar">
            <!-- 网站的logo -->
            <h1 class="logo">
                <a href="/">
                    <img src="../../public/resources/logo.png">
                    <span>成为更好的自己</span>
                </a>
            </h1>

            <!-- 菜单栏 -->
            <div class="left-menu">
                <!-- 创建菜单图标 -->
                <ul class="menu-icon">
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <!-- 创建菜单 -->
                <ul class="nav">
                    <!-- 超链接的地址，写各个页面的地址 -->
                    <li><a href="./../myPlan/myTodo.html">个人计划</a></li>
                    <li><a href="./../note-program/index.html">我的笔记</a></li>
                    <li><a href="./../minder/mind.html">思维导图</a></li>
                    <li><a href="./../dataStatistics/dataStatistics.html">数据统计</a></li>
                    <li><a href="./../square/square.html">广场</a></li>
                </ul>

            </div>

            <!-- 用户信息 -->
            <div class="user-info">
                <!-- 这里是可以跳转到用户信息详细设置页的，写用户信息详细设置页的地址 -->
                <a href="./../other/noviceGuidance.html">
                    <img src="../../public/resources/user-pic.jpg" alt="用户头像">
                </a>
            </div>
        </div>
    </div>
    <div class="main-wrapper">
        <!--侧边栏-->
        <aside>
            <div class="aside-title">
                <p>个人中心</p>
            </div>
            <a href="modifyName.html">修改昵称</a>
            <a href="modifyPsw.html">修改密码</a>
            <a href="noviceGuidance.html" style="color: #4fbef6;">新手指引</a>
            <a href="productIntro.html">产品简介</a>
            <div class="edition">
                <p>版本号V1.0.1</p>
            </div>
        </aside>
        <!--主体区域-->
        <main class="pc-main">
            <h2>我的计划</h2>
            <p>1. 添加计划</p>
            <img src="./../../public/resources/img01.png">
            <img src="./../../public/resources/img02.png">
            <p>计划分为长期计划和今日计划，您可以根据自身情况选择适合自己的方式，有效的督促自己~</p>
            <h2>我的笔记</h2>
            <p>1. 新建笔记本</p>
            <p>在左侧笔记本栏下方，点击“新建笔记本”即可，新建自动刷新显示</p>
            <img src="./../../public/resources/img03.png">
            <br>
            <p>2. 新建笔记</p>
            <p>为简化需求，之后在新建笔记本之后，方可新建笔记，若笔记本组不为空，这进入后默认打开第一个笔记本，在中间上方点击新建笔记，即可跳转编辑界面，如下：</p>
            <img src="./../../public/resources/img04.png">
            <p>
                该编辑界面为嵌入网页的markdown编辑器，菜单栏中有各种选项，方便不熟悉markdown的用户正常使用笔记，其中左侧为编辑栏，右侧为预览栏，点击上方相关按钮，可以对应得关闭预览界面，或进入预览模式。点击”保存并退出“，并输入笔记标题后，即可正常保存退出，之后会回到首页。</p>
            <p>3. 查看笔记与修改笔记</p>
            <p>在笔记栏目，点击相应笔记，即可在右侧显示预览，如下图所示</p>
            <img src="./../../public/resources/img05.png">
            <p>其中，右下角有一个半透明按钮，点击之后进入编辑界面，如图</p>
            <img src="./../../public/resources/img06.png">
            <p>编辑之后，点击”保存并退出“按钮，即可完成编辑操作。</p>
            <p>4. 删除笔记</p>
            <p>在PC端，在笔记列表对应笔记标题上方点击右键，即可呼出删除菜单，如下图：</p>
            <img src="./../../public/resources/img07.png">
            <p>点击该按钮并确认，即可删除该笔记</p>
            <p>5. 添加标签</p>
            <p>笔记列表支持对笔记添加标签，便于分类与管理，点击”+标签按钮，即可添加“</p>
            <p>6. 笔记搜索</p>
            <p>在笔记列表上方，支持笔记搜索功能，支持搜索笔记名以及便签，同时支持模糊搜索</p>
            <h2>思维导图</h2>
            <p>双击页面上的节点，修改节点内容；单击左侧的插入下一个节点/上一个节点，即可快速创建</p>
            <img src="./../../public/resources/img3-1.png">
            <h2>数据统计</h2>
            <p>在该模块，你可以实时监控自己使用APP的情况~</p>
            <img src="./../../public/resources/img4-1.png">
            <h2>广场</h2>
            <p>广场页：等宽瀑布流展示数据，滚动到底部加载更多数据，并对视口外的数据懒加载，背景是一个圆形动画</p>
            <img src="./../../public/resources/img5-1.png">
            <img src="./../../public/resources/img5-2.png">
            <p>个人发布页：点击广场页上任意用户用户名可以进入，显示该用户发布过的所有内容</p>
            <img src="./../../public/resources/img5-3.png">
            <p>内容详情页：显示该内容的具体评论情况，并且可以发布评论（未数据交互）</p>
            <img src="./../../public/resources/img5-4.png">
        </main>
    </div>
</div>
<div class="mobile">
    <header id="registerHeader">
        <img id="returnBtn" src="./../../public/resources/arrow-back.png">
        <p id="registerTitle">新手指引</p>
    </header>
    <main class="mobile-main">
        <div>
            <h2>我的计划</h2>
            <p>1.添加今日计划</p>
            <img src="./../../public/resources/img1-1.png">
            <p>2.进入产品长期页</p>
            <img src="./../../public/resources/img1-2.png">
            <p>3.添加长期计划</p>
            <img src="./../../public/resources/img1-3.png">
            <h2>我的笔记</h2>
            <p>1. 笔记主页</p>
            <img src="./../../public/resources/img2-1.png">
            <p>如图，移动端不显示笔记本栏以及预览栏，其中，新建笔记本在笔记本的下拉菜单中，笔记本切换则在右侧的下拉菜单中，如下图所示</p>
            <img src="./../../public/resources/img2-2.png">
            <img src="./../../public/resources/img2-3.png">
            <p>2. 笔记的新建、标签添加、搜索</p>
            <P> 为简化需求，之后在新建笔记本之后，方可新建笔记，若笔记本组不为空，这进入后默认打开第一个笔记本，在中间上方点击新建笔记，即可跳转编辑界面，</P>
            <P>
                该编辑界面为嵌入网页的markdown编辑器，菜单栏中有各种选项，方便不熟悉markdown的用户正常使用笔记，其中左侧为编辑栏，右侧为预览栏，点击上方相关按钮，可以对应得关闭预览界面，或进入预览模式。点击”保存并退出“，并输入笔记标题后，即可正常保存退出，之后会回到首页。</P>
            <p>3. 笔记的查看与编辑</p>
            <p>点击对应的笔记卡片，可直接开始编辑笔记，如下图：</p>
            <img src="./../../public/resources/img2-4.png">
            <p>若想开始预览而不进行编辑操作，可点击上方最下侧的”显示器“图标，开启预览模式，如图所示：</p>
            <img src="./../../public/resources/img2-5.png">
            <p>4. 笔记的删除</p>
            <p>在笔记列表长按笔记卡片，即可呼出确认删除按钮，点击确定即可删除，如图：</p>
            <img src="./../../public/resources/img2-6.png">
            <h2>思维导图</h2>
            <p>双击页面上的节点，修改节点内容；单击左侧的插入下一个节点/上一个节点，即可快速创建</p>
            <img src="./../../public/resources/img3-1.png">
            <h2>数据统计</h2>
            <p>在该模块，你可以实时监控自己使用APP的情况~</p>
            <img src="./../../public/resources/img4-1.png">
            <h2>广场</h2>
            <p>广场页：</p>
            <img src="./../../public/resources/img5-5.png">
            <p>个人发布页：</p>
            <img src="./../../public/resources/img5-6.png">
            <p>评论详情页：</p>
            <img src="./../../public/resources/img5-7.png">
        </div>
    </main>
</div>
<script src="../../public/js/userInfo.js"></script>
<script src="../../public/js/api.js"></script>
<script src="../../public/js/other/noviceGuidance.js"></script>
</body>
</html>